<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '班级成员',
	},
}
</route>
<template>
	<view class="page-roster">
		<view class="w-full px-4 mb-6 mt-4 box-border" v-if="getClassMembers.teacher_count > 0">
			<view class="w-full flex items-center text-[#333] text-[29rpx] font-bold">
				班级教师
				<text class="text-[#34A4E2] text-[23rpx]">({{ getClassMembers.teacher_count }})</text>
			</view>
			<view
				class="w-full bg-white rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center mt-3"
				v-for="item in getClassMembers.teacher_list"
			>
				<view class="flex items-center">
					<image
						:src="
							item.user_avatar ||
							'https://breadbook.oss-cn-hangzhou.aliyuncs.com/static/teacher.png'
						"
						class="w-[75rpx] h-[75rpx] rounded-[50%] roster-img"
					></image>
					<text class="ml-2 text-[#303030] text-[28rpx]">{{ item.user_name }}</text>
				</view>
			</view>
		</view>
		<view class="w-full px-4 mb-6 mt-6 box-border" v-if="getClassMembers.student_count > 0">
			<view class="w-full flex items-center text-[#333] text-[29rpx]">
				<view style="width: calc(100% - 60rpx)" class="font-bold">
					学生
					<text class="text-[#34A4E2] text-[23rpx]">({{ getClassMembers.student_count }})</text>
				</view>
				<!-- <image
					src="https://breadbook.oss-cn-hangzhou.aliyuncs.com/static/class-saixuan-zk.png"
					style="width: 36rpx; height: 36rpx"
				/> -->
			</view>
			<uv-swipe-action :autoClose="true">
				<view
					v-for="(item, ind) in getClassMembers.student_list"
					:key="item.student_id"
					style="margin-top: 30rpx; height: 142rpx; overflow: hidden; border-radius: 20rpx"
				>
					<uv-swipe-action-item
						:options="options"
						:disabled="false"
						:show="swipeShow"
						@click="handleDelClick"
						:index="ind"
						:name="ind"
					>
						<view
							class="w-full bg-white rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center"
						>
							<view class="flex items-center">
								<image
									:src="
										item.user_avatar ||
										'https://breadbook.oss-cn-hangzhou.aliyuncs.com/static/student2.png'
									"
									class="w-[75rpx] h-[75rpx] rounded-[50%] roster-img"
								></image>
								<text class="ml-2 text-[#303030] text-[28rpx]">{{ item.user_name }}</text>
							</view>
							<view class="flex items-center">
								<text class="mr-1 text-[#303030] text-[24rpx]">积分</text>
								<text class="mr-1 text-[#ABABAB] text-[24rpx]">{{ item.integral }}</text>
							</view>
							<!-- <view class="flex items-center">
							<text class="mr-1 text-[#D05810] text-[24rpx]">删除学生</text>
							<image
								src="/static/class/classDelete.png"
								class="w-[30rpx] h-[30rpx] rounded-[50%] roster-img"
							></image>
						</view> -->
						</view>
					</uv-swipe-action-item>
				</view>
			</uv-swipe-action>
			<!-- <view
				class="w-full bg-[#E2E2E4] rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center mt-3"
			>
				<view class="flex items-center">
					<image
						src="/static/tabbar/classS.png"
						class="w-[75rpx] h-[75rpx] rounded-[50%] roster-img"
					></image>
					<text class="ml-2 text-[#303030] text-[28rpx]">衬衣衫</text>
				</view>
				<view class="flex items-center">
					<text class="mr-1 text-[#D05810] text-[24rpx]">删除学生</text>
					<image
						src="/static/class/classDelete.png"
						class="w-[30rpx] h-[30rpx] rounded-[50%] roster-img"
					></image>
				</view>
			</view> -->
		</view>
		<view class="ml-5 mr-5 mb-10">
			<uv-button type="primary" size="large" text="退出班级" @click="handleExitClick"></uv-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getClassMembersApi, delMemberApi, exitClassApi } from '@/service/class';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const currentClassId = ref();
onLoad((res: any) => {
	console.log('====>onLoad', res);
	currentClassId.value = res.class_id;
});

const getClassMembers = ref();
const getClassMembersList = async (class_id: number) => {
	try {
		const res = await getClassMembersApi(class_id);
		if (res.status_code === 200) {
			const resData: any = res.data;
			getClassMembers.value = resData;
			//console.log('========>getPartBookList', partBookList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPartBookListerror', error);
		uni.hideLoading();
	}
};

const options = reactive([
	{
		text: '删除',
		style: {
			backgroundColor: '#f56c6c',
		},
	},
]);
const swipeShow = ref(false);
const handleDelClick = async (item: any) => {
	console.log('handleDelClick', item);

	uni.showModal({
		title: '提示',
		content: '确认将该学生从班级移除么?',
		async success(res) {
			if (res.confirm) {
				uni.showLoading({
					title: '移除中...',
				});
				try {
					const res = await delMemberApi(
						currentClassId.value,
						getClassMembers.value.student_list[item.name].student_id,
					);
					if (res.status_code === 200) {
						const resData: any = res.data;
						uni.showToast({
							icon: 'none',
							title: res.message || '删除成功',
						});
						getClassMembersList(currentClassId.value);
						swipeShow.value = false;
					} else {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: res.message || '获取失败~',
						});
					}
				} catch (error) {
					uni.hideLoading();
				}
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		},
	});
};

const handleExitClick = async () => {
	try {
		const res = await exitClassApi(currentClassId.value);
		if (res.status_code === 200) {
			uni.showToast({
				icon: 'none',
				title: '退出班级成功',
			});
			uni.switchTab({
				url: '/pages/class/index',
			});
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};

onMounted(() => {
	getClassMembersList(currentClassId.value);
});
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.roster-img {
	background: #d1d1d1;
	border: 2rpx solid #f3f1f3;
}
</style>
